<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {  useRouter, useRoute } from "vue-router"
import  store1 from "../../store/index"
let store:any = store1()

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  store.nav=tab.props.label
  console.log(store.nav,666)
  // console.log(tab.props.name,6666)
  if(tab.props.name=="first"){
    change_disease()
  }
  if(tab.props.name=="second"){
    change_hospital()
  }
}

let router = useRouter()

function change_disease(){
  router.push({ path: `/searcher/disease` })
}

function change_hospital(){
  router.push({ path: `/searcher/hospital` })
}



</script>

<template>
  <el-row style="background-color:white;">
    <el-col :span="13" :offset="3" style="background-color:white;">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="background-color:white;">
        <el-tab-pane label="查疾病" name="first" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="查医院" name="second" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="查药品" name="third" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="查检查/手术" name="fourth" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="查疫苗" name="fifth" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="急救指南" name="sixth" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="测一测" name="seventh" style="background-color:white;"></el-tab-pane>
        <el-tab-pane label="科普视频" name="eighth" style="background-color:white;"></el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
<style>
.el-tabs__item:hover {
  color: #67C23A !important;
}

.el-tabs__item.is-active {
  color: #67C23A !important;
}

.el-tabs__active-bar {
  background-color: #67C23A !important;
}

.el-tabs__nav-wrap::after {
  background-color: white !important;
}

.el-tabs__item {
  font-size: 16px !important;
  background-color: white;
}

.el-tabs__nav-scroll {

  background-color: white;
}
</style>
